<template>
  <!--文章 -->
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      <text>返回</text>
    </template>
    <template #content>
      <text v-if="articleInfo" class="text-bold">{{ articleInfo.title }}</text>
    </template>
  </MrCustom>
  <view class="cu-timeline radius padding-tb-xs solids-bottom" v-if="articleInfo">
    <view class="flex justify-between">
      <view class="flex padding-left-sm">
        <view class="cu-avatar round lg" @click="toQueryNurse(articleInfo.username)"
              :style="'background-image:url('+prefix+articleInfo.avatar+');'">
        </view>
        <view class="text-gray text-sm padding-left-sm">
          <view class="text-lg text-black padding-top-xs">{{ articleInfo.name }}</view>
          <view class="padding-top-xs">{{ articleInfo.createTime }}</view>
        </view>
      </view>
      <view class="padding-right flex align-center">
        <button class="cu-btn round bg-blue">
          <text class="cuIcon-add"></text>
          关注
        </button>
      </view>
    </view>
    <view class="padding-sm text-lg margin-top-sm">
      <view class="text-area margin-top text-break-all" v-html="articleInfo.content"></view>
    </view>
    <view class="padding-left-sm flex align-center padding-bottom-xs">
      <button class="cu-btn round">{{ articleInfo.type }}</button>
    </view>
  </view>


  <!-- 评论列表-->
  <view class="bg-white" :style="{marginBottom:uni2px(100)+'px'}">
    <view class="cu-bar">
      <view class="text-black text-xxl padding-lr-sm">
        全部评论
      </view>
    </view>
    <z-paging ref="pagingRef" @query="queryList" v-model="list" use-page-scroll>
      <CommentList :list="list" can-reply></CommentList>
    </z-paging>
  </view>
  <view>&nbsp</view>
  <!-- 评论-->
  <view class="cu-bar foot input ">
    <view class="action">
      <text class="cuIcon-write text-gray"></text>
    </view>

    <input class="solid-bottom"
           confirm-type="send"
           @confirm="addCommentRoot"
           placeholder="写评论" v-model="content"
           maxlength="300" cursor-spacing="10"/>

    <view class="action" v-if="articleInfo">
      <text class="cuIcon-comment text-black"></text>
      <text v-if="articleInfo.isLike===1" class="cuIcon-appreciate text-orange"
            @click="likeArticle">{{articleInfo.likeCount}}</text>
      <text v-else class="cuIcon-appreciate text-black" @click="likeArticle"></text>
    </view>
  </view>


</template>

<script setup lang="ts">

import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import api from "@/api";
import {useUserStore} from "@/store";
import CommentList from "@/components/common/list/CommentList.vue";
import {imagePathPrefix} from '/settings'
import MrCustom from "@/components/common/MrCustom.vue";

const prefix = imagePathPrefix
const pagingRef = ref()
const articleInfo = ref()
const content = ref('')
const list = ref([])
const userStore = useUserStore()
import {uni2px} from "@/utils";


onLoad((option) => {
  articleInfo.value = JSON.parse(decodeURIComponent(option.articleInfo))
  getArticleInfo(articleInfo.value.id)
})

const toQueryNurse = (username: any) => {
  let nurseInfo = {
    username: username
  }
  uni.navigateTo({
    url: '/pages/common/introduction/nurse?nurseInfo=' + encodeURIComponent(JSON.stringify(nurseInfo))
  })
}
const getArticleInfo = (id: any) => {
  api.article.id({
    id: id
  }).then(res => {
    if (res && res.data.code === 0) {
      articleInfo.value = res.data.data;
    }
  })
}
/**
 * 评论
 */
const queryList = (pageNo: any, pageSize: any) => {
  //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  //模拟请求服务器获取分页数据，请替换成自己的网络请求
  api.comment.commentList({
    targetId: articleInfo.value.id,
    targetType: 2,
    pageNo: pageNo,
    pageSize: pageSize
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      pagingRef.value.complete(tmp);
    }
  })
}


const likeArticle = () => {
  articleInfo.value.isLike = Math.abs(articleInfo.value.isLike - 1)
  api.article.like({
    id: articleInfo.value.id,
    toUsername: articleInfo.value.username
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success'
      })
    }
  })
}

const addCommentRoot = () => {
  console.log(content.value)
  api.comment.createCommentRoot({
    targetId: articleInfo.value.id,
    targetType: 2,
    fromUsername: userStore.userInfo.username,
    fromAvatar: userStore.userInfo.avatar,
    fromName: ' ',
    toUsername: articleInfo.value.username,
    content: content.value
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success',
        success: () => {
          pagingRef.value.reload()
          content.value = ''
        }
      })
    }
  })
}


</script>

<style scoped>

</style>